import { Meta, Subtitle, Title, Canvas, Controls, Description, Stories, Markdown } from "@storybook/blocks";
import * as MessageStories from './Message.stories'

<Meta of={MessageStories} />

<Title />

<Subtitle />
[Component reference on primevue](https://primevue.org/message/)

## Import

```ts
import Message from "primevue/message";
```

## Playground

<Canvas of={MessageStories.Playground} sourceState="shown" />
<Controls of={MessageStories.Playground} />

## How to use

To change the color of the message, use the `severity` property. The default value is `info`.
Message also provides a `closable` property to display a close icon, and accepts any content as its children.


<Description of={MessageStories} />

<Stories title='' includePrimary={false} />


## Accessibility

### Screen Reader
Message component uses `alert` role that implicitly defines `aria-live` as "assertive" and `aria-atomic` as "true". Since any attribute is passed to the root element, attributes like `aria-labelledby` and `aria-label` can optionally be used as well.

Close element is a `button` with an `aria-label` that refers to the `aria.close` property of the locale API by default, you may use [closeButtonProps](https://primevue.org/message/#api.message.props.closeButtonProps) to customize the element and override the default `aria-label`.

### Close button keyboard support

<Markdown>
    {`
| Key   | Function              |
|-------|-----------------------|
| enter | Closes the message.  |
| space | Closes the message.  |
`}
</Markdown>
